// 工具栏组件：显示上传图片、图标、文本按钮，触发父组件回调
// 说明：此组件为无状态函数组件，仅负责展示按钮并将点击事件通过 props 回调给父组件处理。
//       我们把样式局部化到 `Toolbar.less`，并使用根类 `creat-toolbar` 避免与全局样式冲突。
// Props:
// - onChooseImage: 点击“上传图片”时调用，用于触发小程序或浏览器的图片选择流程
// - onOpenIconPicker: 点击“图标”时调用，打开图标选择弹窗
// - onOpenTextEditor: 点击“文本”时调用，打开文本编辑弹窗
import React from 'react'
import { View } from '@tarojs/components'
import './Toolbar.less'

type Props = {
  onChooseImage: () => void
  onOpenIconPicker: () => void
  onOpenTextEditor: () => void
  onAddPaper?: () => void
  onRemovePaper?: () => void
}

const Toolbar: React.FC<Props> = ({ onChooseImage, onOpenIconPicker, onOpenTextEditor, onAddPaper, onRemovePaper }) => {
  // 直接返回 JSX，所有事件通过 props 传入，便于父组件集中管理业务逻辑
  return (
    <View className='creat-toolbar'>     
      {/* 按钮行：每个按钮均使用无状态回调，便于测试和复用 */}
      <View className='tool-row'>
        <View className='tool-btn' onClick={onChooseImage}>上传图片</View>
        <View className='tool-btn' onClick={onOpenIconPicker}>图标</View>
        <View className='tool-btn' onClick={onOpenTextEditor}>文本</View>
        <View className='tool-btn' onClick={() => onAddPaper && onAddPaper()}>加纸</View>
        <View className='tool-btn' onClick={() => onRemovePaper && onRemovePaper()}>减纸</View>
      </View>
    </View>
  )
}

export default Toolbar


